import React from 'react';
import { Form, Input, Button, Upload, message } from 'antd';
import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';

function beforeUpload(file) {
    const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
    if (!isJpgOrPng) {
        message.error('仅限于 JPG/PNG 文件!');
    }
    const isLt2M = file.size / 1024 / 1024 < 2;
    if (!isLt2M) {
        message.error('文件大小不得大于 2MB!');
    }
    return isJpgOrPng && isLt2M;
}
function getBase64(img, callback) {
    const reader = new FileReader();
    reader.addEventListener('load', () => callback(reader.result));
    reader.readAsDataURL(img);
}
class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: false,
            imageUrl: '',
        }
    }
    componentDidMount() {
    }
    onFinish = (values) => {
        console.log(values);
    };
    handleChange = info => {
        if (info.file.status === 'uploading') {
            this.setState({ loading: true });
            return;
        }
        if (info.file.status === 'done') {
            // Get this url from response in real world.
            getBase64(info.file.originFileObj, imageUrl =>
                this.setState({
                    imageUrl,
                    loading: false,
                }),
            );
        }
    };
    render() {
        const layout = {
            labelCol: { span: 4 },
            wrapperCol: { span: 16 },
        };
        const uploadButton = (
            <div>
                {this.state.loading ? <LoadingOutlined /> : <PlusOutlined />}
                <div className="ant-upload-text">Upload</div>
            </div>
        );
        const { imageUrl } = this.state;
        return (
            <div>
                <Form {...layout} ref={this.formRef} onFinish={this.onFinish} >
                    <Form.Item
                        name={['module', 'name']}
                        label="应用名称"
                        rules={[{ required: true, message: "请输入应用名称" }]}>
                        <Input />
                    </Form.Item>
                    <Form.Item
                        name={['module', 'protocol']}
                        label="协议名称"
                        rules={[{ required: true, message: "请输入授权用户" }]}>
                        <Input />
                    </Form.Item>
                    <Form.Item
                        name={['module', 'path']}
                        label="应用路径"
                        rules={[{ required: true, message: "请输入应用路径" }]}>
                        <Input />
                    </Form.Item>
                    <Form.Item
                        name={['module', 'introduction']}
                        label="描述信息"
                        rules={[{ required: true, message: "请输入描述信息" }]}>
                        <Input.TextArea />
                    </Form.Item>
                    <Form.Item label="应用图标"
                        name={['module', 'avatar']}
                        rules={[{ required: true, message: "请输入业务图标" }]}>
                        <Upload
                            name="avatar"
                            listType="picture-card"
                            className="avatar-uploader"
                            showUploadList={false}
                            action=""
                            beforeUpload={beforeUpload}
                            onChange={this.handleChange}
                        >
                            {imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton}
                        </Upload>
                    </Form.Item>
                    <Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 4 }}>
                        <Button type="primary" htmlType="submit">确定</Button>
                    </Form.Item>
                </Form>
            </div>
        )
    }
}
export default App